<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>星巴克后台页面</title>
	
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
	<link rel="stylesheet" href="http://at.alicdn.com/t/font_1327450_9qlr53v4dy.css">
	<script src="./js/bootstrap.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.css">
	<link rel="stylesheet" href="./css/houtai-position.css">
	<link rel="stylesheet" href="./css/common.css">
</head>
<body>
	<div class="container">
		<div class="top">
			<div class="logo">
				星巴克在中国
			</div>
		</div>
		<div class="content">
			<div class="row">
                <div class="col-3">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                          <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">用户管理</a>
                        </li>
                        <li class="nav-item" role="presentation">
                          <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">订单管理</a>
                        </li>
                        <li class="nav-item" role="presentation">
                          <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">购物车管理</a>
                        </li>
                    </ul>
                </div>
				        <div class="col-9">
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                            <div class="right">
                                <div class="wrapper">
                                    <!-- 按钮组 -->
                                    <div class="btns">
                                        <!-- Button trigger modal -->
                                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                                            添加
                                        </button> 
                                         <!-- Button trigger modal -->
                                         <button type="button" class="btn btn-primary-2" data-toggle="modal" data-target="#exampleModal-2">
                                            批量删除
                                          </button>
                                    </div>
                                    <!-- 表格区域 -->
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <td>编号</td>
                                                <td>姓名</td>
                                                <td>密码</td>
                                                <td>邮箱</td>
                                                <td>手机号</td>
                                                <td>操作</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td> <input type="checkbox"></td>
                                                <td>张三</td>
                                                <td>********</td>
                                                <td>233333333333</td>
                                                <td>1356458952</td>
                                                <td>
                                                    <button type="button" class="btn btn-primary2" data-toggle="modal" data-target="#exampleModal2">
                                                        删除
                                                    </button> 
                                                     
                                                    <!-- <button type="button" class="btn btn-link">修改</button> -->
                                                    <button type="button" class="btn btn-primary1" data-toggle="modal" data-target="#editModal">
                                                        修改
                                                    </button> 
                                                      
                                                </td>
                                            </tr>
                                            <tr>
                                              <td> <input type="checkbox"></td>
                                              <td>张三</td>
                                              <td>********</td>
                                              <td>233333333333</td>
                                              <td>1356458952</td>
                                              <td>
                                                  <button type="button" class="btn btn-primary2" data-toggle="modal" data-target="#exampleModal2">
                                                      删除
                                                  </button> 
                                                   
                                                  <!-- <button type="button" class="btn btn-link">修改</button> -->
                                                  <button type="button" class="btn btn-primary1" data-toggle="modal" data-target="#editModal">
                                                      修改
                                                  </button> 
                                                    
                                              </td>
                                          </tr>
                                          <tr>
                                            <td> <input type="checkbox"></td>
                                            <td>张三</td>
                                            <td>********</td>
                                            <td>233333333333</td>
                                            <td>1356458952</td>
                                            <td>
                                                <button type="button" class="btn btn-primary2" data-toggle="modal" data-target="#exampleModal2">
                                                    删除
                                                </button> 
                                                 
                                                <!-- <button type="button" class="btn btn-link">修改</button> -->
                                                <button type="button" class="btn btn-primary1" data-toggle="modal" data-target="#editModal">
                                                    修改
                                                </button> 
                                                  
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                            <div class="right">
                                <div class="wrapper">
                                    <!-- 按钮组 -->
                                    <div class="btns">
                                      <!-- Button trigger modal -->
                                      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                                          添加
                                      </button> 
                                       <!-- Button trigger modal -->
                                       <button type="button" class="btn btn-primary-2" data-toggle="modal" data-target="#exampleModal-2">
                                          批量删除
                                        </button>
                                  </div>
                                  <!-- 表格区域 -->
                                  <table class="table">
                                      <thead>
                                          <tr>
                                              <td>编号</td>
                                              <td>姓名</td>
                                              <td>密码</td>
                                              <td>邮箱</td>
                                              <td>手机号</td>
                                              <td>操作</td>
                                          </tr>
                                      </thead>
                                      <tbody>
                                          <tr>
                                              <td> <input type="checkbox"></td>
                                              <td>张三</td>
                                              <td>********</td>
                                              <td>233333333333</td>
                                              <td>1356458952</td>
                                              <td>
                                                  <button type="button" class="btn btn-primary2" data-toggle="modal" data-target="#exampleModal2">
                                                      删除
                                                  </button> 
                                                   
                                                  <!-- <button type="button" class="btn btn-link">修改</button> -->
                                                  <button type="button" class="btn btn-primary1" data-toggle="modal" data-target="#editModal">
                                                      修改
                                                  </button> 
                                                    
                                              </td>
                                          </tr>
                                          <tr>
                                            <td> <input type="checkbox"></td>
                                            <td>张三</td>
                                            <td>********</td>
                                            <td>233333333333</td>
                                            <td>1356458952</td>
                                            <td>
                                                <button type="button" class="btn btn-primary2" data-toggle="modal" data-target="#exampleModal2">
                                                    删除
                                                </button> 
                                                 
                                                <!-- <button type="button" class="btn btn-link">修改</button> -->
                                                <button type="button" class="btn btn-primary1" data-toggle="modal" data-target="#editModal">
                                                    修改
                                                </button> 
                                                  
                                            </td>
                                        </tr>
                                        <tr>
                                          <td> <input type="checkbox"></td>
                                          <td>张三</td>
                                          <td>********</td>
                                          <td>233333333333</td>
                                          <td>1356458952</td>
                                          <td>
                                              <button type="button" class="btn btn-primary2" data-toggle="modal" data-target="#exampleModal2">
                                                  删除
                                              </button> 
                                               
                                              <!-- <button type="button" class="btn btn-link">修改</button> -->
                                              <button type="button" class="btn btn-primary1" data-toggle="modal" data-target="#editModal">
                                                  修改
                                              </button> 
                                                
                                          </td>
                                      </tr>
                                      </tbody>
                                  </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                            <div class="right">
                                <div class="wrapper">
                                    <!-- 按钮组 -->
                                    <div class="btns">
                                      <!-- Button trigger modal -->
                                      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                                          添加
                                      </button> 
                                       <!-- Button trigger modal -->
                                       <button type="button" class="btn btn-primary-2" data-toggle="modal" data-target="#exampleModal-2">
                                          批量删除
                                        </button>
                                  </div>
                                  <!-- 表格区域 -->
                                  <table class="table">
                                      <thead>
                                          <tr>
                                              <td>编号</td>
                                              <td>姓名</td>
                                              <td>密码</td>
                                              <td>邮箱</td>
                                              <td>手机号</td>
                                              <td>操作</td>
                                          </tr>
                                      </thead>
                                      <tbody>
                                          <tr>
                                              <td> <input type="checkbox"></td>
                                              <td>张三</td>
                                              <td>********</td>
                                              <td>233333333333</td>
                                              <td>1356458952</td>
                                              <td>
                                                  <button type="button" class="btn btn-primary2" data-toggle="modal" data-target="#exampleModal2">
                                                      删除
                                                  </button> 
                                                   
                                                  <!-- <button type="button" class="btn btn-link">修改</button> -->
                                                  <button type="button" class="btn btn-primary1" data-toggle="modal" data-target="#editModal">
                                                      修改
                                                  </button> 
                                                    
                                              </td>
                                          </tr>
                                      </tbody>
                                  </table>
                                </div>
                            </div>
                        </div>
                    </div> 
                </div>              
		  </div>
		</div>
	</div>


    <!--表头添加 Modal   exampleModal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">添加用户</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group row">
                <label for="inputEmail3" class="col-sm-2 col-form-label">姓名</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputEmail3">
                </div>
              </div>
              <div class="form-group row">
                <label for="inputPassword3" class="col-sm-2 col-form-label">密码</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control" id="inputPassword3">
                </div>
              </div>
              <div class="form-group row">
                <label for="inputEmail3" class="col-sm-2 col-form-label">邮箱</label>
                <div class="col-sm-10">
                  <input type="email" class="form-control" id="inputEmail3">
                </div>
              </div>
              <div class="form-group row">
                <label for="inputEmail3" class="col-sm-2 col-form-label">手机号</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputEmail3">
                </div>
              </div>
              <div class="form-group row">
                <div class="col-sm-10">
                  <button type="submit" class="btn btn-primary">确认新建</button>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary">保存</button>
          </div>
        </div>
      </div>
    </div>

    <!--表头批量删除 Modal exampleModal-2 -->
    <div class="modal fade" id="exampleModal-2" tabindex="-1" aria-labelledby="exampleModalLabel-2" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel-2">确定删除？</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>确定要删除信息吗？</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary-2">True</button>
      </div>
    </div>
  </div>
    </div>

     <!-- 删除按钮 Modal  exampleModal2 -->
     <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel2" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel2">确定要删除吗？</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
              <h3>确定要删除此信息？</h3>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary2">True</button>
          </div>
        </div>
      </div>
     </div>

     <!-- 修改按钮 Modal  editModal  -->
     <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">修改用户信息</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group row">
                <label for="inputEmail3" class="col-sm-2 col-form-label">姓名</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputEmail3" placeholder="张三">
                </div>
              </div>
              <div class="form-group row">
                <label for="inputPassword3" class="col-sm-2 col-form-label">密码</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control" id="inputPassword3" placeholder="********">
                </div>
              </div>
              <div class="form-group row">
                <label for="inputEmail3" class="col-sm-2 col-form-label">邮箱</label>
                <div class="col-sm-10">
                  <input type="email" class="form-control" id="inputEmail3" placeholder="233333@qq.com">
                </div>
              </div>
              <div class="form-group row">
                <label for="inputEmail3" class="col-sm-2 col-form-label">手机号</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputEmail3" placeholder="1356458952">
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary">确认修改</button>
          </div>
        </div>
      </div>
     </div>
</body>
</html>